<template>
  <div class="top-normal">
    <h3>官方榜</h3>
    <ul class="content">
      <li v-for="item in topList" :key="item.id" class="item" @click="$router.push('/rank/' + item.id)">
        <div class="left">
          <img :src="item.coverImgUrl" v-lazy="item.coverImgUrl" alt="" />
          <span>{{ item.updateFrequency }}</span>
        </div>
        <ol class="right">
          <li v-for="(track, index) in item.tracks" :key="index">
            <span>{{ index + 1 }} . </span>
            <span>{{ track.first }} - {{ track.second }}</span>
          </li>
        </ol>
      </li>
    </ul>
  </div>
  <div class="bottom-normal">
    <h3>全球榜</h3>
    <ul class="content">
      <li v-for="item in bottomList" :key="item.id" class="item" @click="$router.push('/rank/' + item.id)">
        <div class="left">
          <img :src="item.coverImgUrl" v-lazy="item.coverImgUrl" alt="" />
          <span>{{ item.updateFrequency }}</span>
        </div>
      </li>
    </ul>
  </div>
  <transition enter-active-class="fly-in" leave-active-class="fly-out">
    <router-view/>
  </transition>
</template>
<script setup>
import { getCurrentInstance, ref, watch } from 'vue'
let { proxy } = getCurrentInstance()
let topList = ref([])
let bottomList = ref([])
proxy.$showLoading()
proxy.$api.home.getRank().then((res) => {
  topList.value = res.list.slice(0, 3)
  bottomList.value = res.list.slice(3, res.list.length)
  proxy.$hideLoading()
})
</script>
 
<style lang = "less" scoped>
.top-normal {
  padding: 5px;
  h3 {
    font-size: 16px;
    font-weight: 700;
    padding: 5px 0;
  }
  .content {
    .item {
      display: flex;
      height: 110px;
      padding: 5px 0;
      border-bottom: 1px solid @border-color;
      .left {
        position: relative;
        height: 100px;
        img {
          height: 100%;
          border-radius: 3px;
        }
        span {
          height: 30%;
          width: 100%;
          background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(110, 110, 110, 0.4));
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 6px 0 0 7px;
          color: #fff;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 10px;
        color: #808080;
      }
    }
  }
}
.bottom-normal {
  padding: 5px;
  h3 {
    font-size: 16px;
    font-weight: 700;
    padding: 5px 0;
  }
  .content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .item {
      border-bottom: 1px solid @border-color;
      width: 32%;
      padding: 3px 0;
      .left {
        position: relative;
        img {
          width: 100%;
          border-radius: 3px;
        }
        span {
          height: 30%;
          width: 100%;
          background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(110, 110, 110, 0.4));
          position: absolute;
          bottom: 2px;
          left: 0;
          border-radius: 4px;
          padding: 12px 0 0 7px;
          box-sizing: border-box;
          color: #fff;
        }
      }
    }
  }
}
</style>
